<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <div>
       <h1>The Jquery Ajax 01 Page</h1>
       <button onclick="doAjax()">$.ajax(...)</button>
       <button onclick="doGet()">$.get(...)</button>
       <button onclick="doPost()">$.post(...)</button>
       <button onclick="doLoad()">$(...).load("...")</button>
   </div>
   <div id="result"></div>
   <script src="/js/jquery.min.js"></script>
   <script>
       function doLoad(){
           let requestUrl="/doAjaxGet";
           //load函数会在指定位置通过ajax方法加载数据,并将数据更新到这个位置
           $("#result").load(requestUrl,function(){//可选
               console.log("==load complete==");//加载完成以后执行
           });
       }
       function doPost(){
           let requestUrl="/doAjaxPost";
           let params="id=104&city=shijiazhuang";
           $.post(requestUrl,params,function(result){
               alert(result);
           })
       }
       function doGet(){
           let requestUrl="/doAjaxGet";
           let params="";
           $.get(requestUrl,params,function(result){
               $("#result").html(result);
           },"text");//默认为json
       }

       function doAjax(){
          let requestUrl="/doAjaxGet";
          let params="";
          //$符号在这里代表jquery对象
          //ajax({})为jquery种的一个ajax函数,底层封装了ajax请求过程
          $.ajax({
              url:requestUrl,//key必须为url
              data:params,
              //type:"GET",//可以省略,默认为Get请求
              dataType:"text",//服务端响应到客户端的数据格式,默认为json
              //async:true,//默认异步
              //contentType:"application/json",//假如需要向服务端传递json串
              success:function(result){//callback 回调函数
                  console.log("result",result);
                  //JS原生写法
                  //document.querySelector("#result").innerHTML=result;
                  //Jquery种的封装简化写法
                  $("#result").html(result);
              }
          });
          //假如服务端响应到客户端的数据为json格式字符串,底层会默认将其转换为json对象
       }
   </script>
</body>
</html>